// import PropTypes from 'prop-types'
import React, { memo, useCallback } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { RoomsWrapper } from './style'
import RoomItem from '@/components/room-item'
import { changeDetailInfoAction } from '@/store/modules/detail'
import { useNavigate } from 'react-router-dom'

const EntireRooms = memo((props) => {
  const { roomList, totalCount, isLoading } = useSelector((state) => ({
    roomList: state.entire.roomList,
    totalCount: state.entire.totalCount,
    
    isLoading: state.entire.isLoading,
  }), shallowEqual) 

  const dispatch = useDispatch()
  const navigate = useNavigate()
  const itemClickHandle = useCallback((item) => {
    dispatch(changeDetailInfoAction(item))
    navigate('/detail')
  }, [dispatch, navigate])

  return (
    <RoomsWrapper>
      <div className="title">{totalCount}多处住宿</div>
      <div className="content">
        {
          roomList.map((item) => {
            return <RoomItem itemClick={e => itemClickHandle(item)} itemData={item} itemWidth="20%" key={item.id} />
          })
        }
      </div>

      {isLoading && <div className="cover"></div>}
    </RoomsWrapper>
  )
})

EntireRooms.propTypes = {}

export default EntireRooms